<template>
  <div class="app-container">
    <el-card>
      <div class="reviewTaskView-title-outBox">
        <div class="reviewTaskView-title">集约化建设检测</div>
        <div class="back-btn" @click="handBack">
          <img src="@/assets/images/tripartite/back_button.png" alt="">返回
        </div>
      </div>
      <!-- 设备申请明细 -->
      <div class="model-outBox">
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png">
          <span>设备申请明细</span>
        </div>
        <el-table :data="data.iotDeviceInfo" border class="table_technical">
          <el-table-column prop="productName" label="产品名称" align="center" width="400" />
          <el-table-column prop="deviceParam" label="参数" align="center" />
          <el-table-column prop="deviceNum" label="数量" align="center" />
          <el-table-column prop="constructionSite" label="建设地点" align="center" />
          <el-table-column prop="deviceFunction" label="设备功能" align="center" />
          <el-table-column prop="constructionWay" label="建设方式" align="center" />
        </el-table>
      </div>
      <!-- 设备地图 -->
      <div class="model-outBox">
        <!-- iclient -->
        <div class="sm-map">
          <draw :data="data.iotDeviceInfo"></draw>
        </div>
      </div>
      <!-- 重复设备明细 -->
      <!-- <div>
        <div class="model-title">
          <img src="@/assets/images/tripartite/icon_title.png">
          <span>重复设备明细</span>
        </div>
        <el-table :data="repetitionIotDeviceInfo" border class="table_technical">
          <el-table-column label="序号" align="center" type="index" width="65" />
          <el-table-column prop="productName" label="产品名称" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="name" label="设备名称" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="deviceApplicationName" label="所属项目" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="departmentName" label="所属部门" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="address" label="设置位置" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="createTime" label="建设时间" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="deviceStatus" label="状态" align="center" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
            {{scope.row.deviceStatus === '1' ? '在线': '离线'}}
          </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-show="total > 0"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.pageNum"
          :page-sizes="[10, 20, 30, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          class="pagination"
        >
        </el-pagination>
      </div> -->
    </el-card>
  </div>
</template>
<script>

import { getDeviceRepetition, getIotDeviceInfoList } from '@/api/system/iot'
import * as echarts from 'echarts'
import draw from './draw';
function parseMarkers(deviceList, type) {
  const result = []
  if (deviceList.length > 0) {
    deviceList.forEach((item) => {
      result.push({
        ...item,
        latlng: [item.latitude, item.longitude],
        type
      })
    })
  }
  return result
}
export default {
  components: {
    draw,
  },
  data() {
    return {
      spanArr: [], // 用于存放每一行记录的合并数
      pos: 0,
      isShowData: {},
      // 设备申请明细
      reviewTask: {},
      // 集约化建设检测
      annualDeclarationVo: {},
      // 设备地图
      schemeDeclarations: {},
      // 重复设备明细
      systemInfoVoList: [],
      // echarts
      myChart: null,
      // 设备监测数组
      equipmentList: [
        //   {discrb: ''}
        //   {}
      ],
      headers: [
        {
          prop: 'date',
          label: '设备名称'
        },
        {
          prop: 'name',
          label: '数量(个)'
        }
      ],
      tableData: [],
      center: [121.468604, 31.675731], // 地图中心点坐标
      zoom: 15, // 初始化地图显示层级
      mapStyle: 'amap://styles/8b6be8ec497009e17a708205348b899a', // 设置地图样式
      markers: [],
      events: {},
      data: {
        repetitionVo: [], // 重复内容
        repetition: 0, // 重复比率
        iotDeviceInfoSame: [], // 地图-相同地点重复设备
        iotDeviceInfoRT: [], // 地图-范围内重复设备
        iotDeviceInfoApply: [], // 设备信息
        iotDeviceInfo: [], // 申请的设备
        repetitionIotDeviceInfo: [], // 重复的设备
        repetitionVo: [] // 重复数量统计
      },
      currentMaker: {},
      currentMarkerPosition: [],
      isShowInfoWindow: false,
      events: {
        click: () => {
          console.log('click')
        }
      },
      queryParams: {
        pageSize: 10,
        pageNum: 1,
      },
      total: 0,
      repetitionIotDeviceInfo: []
    }
  },
  computed: {
    getHeaders() {
      return this.tableData.length > 0 ? Object.keys(this.tableData[0]) : []
    }
  },
  watch: {
    approvalList(newval, oldval) {
      console.log('监听审核进程', newval, oldval)
      this.getSpanArr(newval)
    }
  },
  mounted() {
    console.log('mounted')
    this.getDeviceRepetition().then(() => {
      // this.initChart();
      this.getIotDeviceInfoList()
    })
  },
  methods: {
    getDeviceRepetition() {
      if (!this.$route.query.proid) return false;
      return getDeviceRepetition(this.$route.query.proid).then((res) => {
        // this.markers = []
        this.data = {
          ...res,
          repetitionIotDeviceInfo: []
        }
        // this.markers = [].concat(
        //   parseMarkers(res.iotDeviceInfoSame, 'orange'), // 相同地点
        //   parseMarkers(res.iotDeviceInfoRT, 'blue'), // 范围重复
        //   parseMarkers(res.iotDeviceInfoApply, 'green') // 申请建设
        // )
        // if (this.markers.length > 0) this.center = this.markers[0].position
        if (res.repetitionVo !== null) {
          this.tableData = [
            Object.keys(res.repetitionVo).reduce(
              (pre, i, index) => {
                return {
                  ...pre,
                  [`col${index}`]: i
                }
              },
              { title: '设备名称' }
            ),
            Object.values(res.repetitionVo).reduce(
              (pre, i, index) => {
                return {
                  ...pre,
                  [`col${index}`]: i
                }
              },
              { title: '数量（个）' }
            )
          ]
        }
      })
    },
    getIotDeviceInfoList(){
      const typeList = this.data.iotDeviceInfo.map(item => item.deviceType).filter(type => !!type)
      getIotDeviceInfoList(typeList, this.queryParams).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.repetitionIotDeviceInfo = res.data;
          this.total = res.total;
        }
      })
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize;
      this.getIotDeviceInfoList()
    },
    handleCurrentChange(pageNum){
      this.queryParams.pageNum = pageNum;
      this.getIotDeviceInfoList()
    },
    /** 返回按钮操作 */
    handBack() {
      // this.$router.push({
      //   path: "/tripartiteReview/reviewTask",
      // });
      this.$router.back()
    },
    infoShow(marker) {
      console.log(marker)
      this.currentMarker = marker
      this.isShowInfoWindow = true
    },
    getMarkerEvents(marker) {
      return {
        click: () => {
          this.currentMarker = marker
          this.currentMarkerPosition = marker.position
          this.isShowInfoWindow = true
          console.log(this.isShowInfoWindow)
        }
      }
    },
    onInfoClose() {
      console.log(this.isShowInfoWindow)
      this.isShowInfoWindow = false
      return false
    }
  }
}
</script>
<style scoped lang="scss">
p {
  margin: 0;
}

.reviewTaskView-title-outBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;

  .reviewTaskView-title {
    font-weight: 500;
    font-size: 18px;
    font-family: "PingFang SC";
  }

  .back-btn {
    font-size: 14px;
    color: #333;
    cursor: pointer;

    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
      position: relative;
      top: 2px;
    }
  }
}

.model-title {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ebecef;
  border-top: 1px solid #ebecef;
  margin-bottom: 24px;
  margin-top: 24px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;

  img {
    width: 16px;
    height: 16px;
    position: relative;
    right: 5px;
    top: 2px;
  }
}

.jy-box {
  width: 100%;
  height: 100%;
  padding: 20px 0;
  position: relative;
  display: flex;
  // justify-content: space-around;

  .jybox-title {
    font-size: 16px;
    color: #000000;
    margin-bottom: 12px;
  }

  .jybox-left {
    margin-left: 10%;
    min-width: 142px;
    height: 142px;
    text-align: center;

    .chart-box {
      width: 400px;
      height: 200px;
    }
  }

  .jybox-right {
    display: inline-block;
    min-width: calc(100% - 400px);
    height: 142px;

    .jybox-right-title {
      font-size: 16px;
      color: #000000;
      margin-bottom: 24px;
      display: inline-block;
    }
  }
}

.markname-box {
  // display: flex;
  // align-items: center;
  display: inline-block;

  .block1 {
    width: 16px;
    height: 16px;
    // background: #28b7d7;
    background-color: #df822d;
    display: inline-block;
    position: relative;
    top: 2px;
  }

  .block2 {
    width: 16px;
    height: 16px;
    background: #3171ee;
    display: inline-block;
    position: relative;
    top: 2px;
  }

  .block3 {
    width: 16px;
    height: 16px;
    background: #df822d;
    display: inline-block;
    position: relative;
    top: 2px;
  }
}

.amap-box {
  width: 100%;
  height: 500px;
  margin-top: 24px;
}
</style>
<style lang="scss">
/*表单label不加粗  */
label {
  font-weight: normal !important;
}

/* el-descriptions-item 文字居中 */
.el-descriptions__body .el-descriptions__table .el-descriptions-item__cell {
  text-align: center;
}

.model-outBox {

  /* 信息描述组件样式更改 */
  .descriptions-item-label {
    width: 266px;
  }

  .descriptions-item-content {
    text-align: left !important;

    img {
      width: 16px;
      height: 16px;
      margin-right: 10px;
      position: relative;
      top: 4px;
    }
  }

  .cancel-border-top {
    border-top: 0 !important;
  }

  .cancel-border-bottom {
    border-bottom: 0 !important;
  }

  .descriptions-item-height {
    height: 108px;
  }
}

.amap-info-sharp {
  // background: #3171ee;
  border-top: 8px solid #3171ee !important;
}

.amap-info-content {
  background: #3171ee;
  color: #fff;
  border-radius: 8px;
  padding: 20px;
}

.info-card {
  &:after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: calc(50% - 10px);
    width: 0px;

    height: 0px;

    border: 10px solid #3171ee;

    border-top-color: #3171ee;

    border-bottom-color: transparent;

    border-right-color: transparent;

    border-left-color: transparent;
  }

  position: relative;
  font-family: "PingFang SC";
  font-style: normal;
  font-size: 12px;
  background: #3171ee;
  border-radius: 5px;
  padding: 10px;
  text-align: left;
  width: 200px;
  min-height: 140px;
  color: #fff;

  p {
    margin: 0;
  }

  .info--title {
    font-weight: 500;
    font-size: 16px;
    line-height: 22px;
    text-transform: uppercase;
  }

  .info--content {
    margin-top: 12px;
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
  }

  .info--footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .info--content {
      max-width: calc(100% - 46px);
      word-break: break-all;
      padding-right: 5px;
    }
  }

  .qrcode {
    // position: absolute;
    width: 46px;
    height: 62px;
    text-align: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 2px;
    padding: 4px;

    img {
      width: 100%;
      height: auto;
    }

    p {
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 400;
      font-size: 10px;
      line-height: 14px;
      margin: 0;
      /* identical to box height */

      text-transform: uppercase;

      /* 文字色/#999999-60% */

      color: #999999;
    }
  }
}

.bg-grey {
  background: #fafafa;
}

.amap-icon {
  img {
    width: 32px;
    height: 32px;
  }
}

.sm-map {
  width: 100%;
  // height: 620px;
}

.my-div-icon {
  width: 100px !important;
  color: #fff;
  // background-color: 
  font-weight: bold;
  font-size: 20px;
}

.my-div-icon2 {
  width: 15px !important;
  height: 15px !important;
  background-color: rgba(99, 87, 225, 0.2);
  border-radius: 50%;
  // font-size: 20px;
}

.test {
  color: #cf4e8c;
  // #df822d,#9edf2d,#22b94d,#279cd7,#3732bd,#b74ecf,#cf4e8c
}
.pagination{
  margin-top: 10px;
}
.descriptions{
  width: 580px;
}
.descriptions-content{
  width: 370px;
}
</style>
